<template>
  <g-table-page
    :store-model-name="storeModelName"
    add-btn-link-text="添加数据字典类型"
    @add-btn-click="addBtnFunc"
    :selection="false"
    :table-operation="tableOperation"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
    <template v-for="item in tableHeadListSlotName" :key="item.slotName" #[item.slotName]="{ row }">
      <div v-if="row">
        <span v-if="item.prop == 'proxyStatus'">
          <el-tag v-if="row[item.prop] == 1" class="ml-2" type="success">有效</el-tag>
          <el-tag v-else class="ml-2" type="danger">无效</el-tag>
        </span>
      </div>
    </template>
  </g-table-page>

  <g-dialog
    v-model:dialog-visible="dialogVisible"
    title="添加-数据字典类型"
    width="650px"
    save-btn-text="提交"
    :click-sure-btn="onSaveBtnClick"
    >
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="formRules"
        label-position="right"
        label-width="140px"
        inline
      >
        <el-form-item label="中文名称：" prop="nameCn">
          <el-input
            v-model="formData.nameCn"
            placeholder="请输入中文名称"
            class="edit-item"
            clearable
          />
        </el-form-item>
        <el-form-item label="英文名称：" prop="nameEn">
          <el-input
            v-model="formData.nameEn"
            placeholder="请输入英文名称"
            class="edit-item"
            clearable
          />
        </el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-input
            v-model="formData.type"
            placeholder="请输入类型"
            class="edit-item"
          />
        </el-form-item>
           <el-form-item label="描述：" prop="des">
          <el-input
            v-model="formData.des"
            placeholder="请输入描述"
            class="edit-item"
          />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number
            v-model="formData.sort"
            placeholder="请输入序号"
            class="edit-item"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <g-select
            v-model="formData.status"
            placeholder="请选择状态"
            class="edit-item"
            :options="[{'id': 1, 'name': '有效'}, {'id': 2, 'name': '无效'}]"
            :filterable="true"
          />
        </el-form-item>
      </el-form>
  </g-dialog>
</template>

<script setup lang="ts">
import { computed, toRefs, ref, reactive } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { addDicApi, updateDicByTypeApi } from '@/api/system'
import { ElMessage } from 'element-plus'
import type { Loading } from '@/components/Dialog/types'
import type { FormInstance, FormRules } from 'element-plus'
import { updateTableByDel } from '@/utils'

const gTableRef = ref<InstanceType<typeof GTablePage> | null>(null)
const storeModelName = 'dicModule'
const tableOperation = {
  width: 100,
  fixed: 'right',
  buttonGroups: [
    ({ row }) => {
      return {
        name: '编辑',
        isShow: true,
        click: ({ row }) => {
          router.push({
            path: '/system/dic/edit',
            query: { id: row.id, type: row.type, des: row.des  }
          })
        }
      }
    },
    ({ row }) => {
      return {
        name: '删除',
        type: 'danger',
        isShow: true,
        click: ({ row }) => {
          updateDicByTypeApi({type: row.type, status: 2 }).then((res) => {
            if(res * 1 === 200){
              ElMessage.success('删除成功');
              updateTableByDel({ storeModelName, row })
              gTableRef.value?.toggleRowSelection(row)
              setTimeout(() => {
                router.go(0);
              }, 100)
            }
          })
        }
      }
    }
  ]
}

const tableHeadListSlotName = computed(() => {
  const tableHeadList = store.state[storeModelName].tableHeadList
  return tableHeadList.filter((item: TableHeadList) => item.slotName)
})

const formData = ref(<
  {
    id: string | number
    nameCn: string
    nameEn: string
    type: string
    des: string
    sort: number
    status: string | number
  }
>{
  id: 0,
  nameCn: '',
  nameEn: '',
  type: '',
  des: '',
  sort: 1,
  status: 1
})
const formRules = reactive<FormRules>({
  nameCn: [{ required: true, message: '请输入中文名称', trigger: 'change' }],
  type: [{ required: true, message: '请输入类型', trigger: 'change' }],
  des: [{ required: true, message: '请输入描述', trigger: 'change' }],
})
const ruleForm = ref<FormInstance>()
const dialogVisible = ref(false)
const addBtnFunc = () => {
  dialogVisible.value = true
  console.log('添加一下吧');
}
// 保存提交
const onSaveBtnClick = (loading: Loading) => {
  ruleForm.value?.validate((valid) => {
    if (valid) {
      loading(true)
      addDicApi(formData.value).then((res) => {
        if(res*1 === 201) ElMessage.success('添加成功')
      })
      setTimeout(() => {
        loading(false)
        router.go(0)
      }, 100)
    } else {
      return false
    }
  })
}
</script>
